<template>
  <div class="shareList">
    <hmNavBar title="面经分享" path="/home/find"></hmNavBar>
    <div class="content">
      <!-- 搜索框
       van-search
            v-model:双向绑定输入框的值
            show-action:是否显示右边取消  boolean:true显示false不显示
            @search:搜索事件
            @cancel:取消事件
     -->
      <van-search
        v-model="inputValue"
        placeholder="请输入搜索内容"
        show-action
        @search="search"
        @cancel="cancelEvent"
        class="search"
      ></van-search>
      <!-- 列表
      1:列表选项组件shareItem.vue注册,使用
      2:获取数据  导入api并调用存储数据
      3:渲染      
       -->
      <div v-if="showList">
        <van-list
          v-if="bol"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="load"
        >
          <shareItem
            v-for="(item, index) in list"
            :key="index"
            :info="item"
          ></shareItem>
        </van-list>
      </div>
      <div v-else>
        <h3 class="title mb28">大家都在搜</h3>
        <!-- 
          1:定义api
          2:导入api
          3:调用渲染
         -->
        <van-tag
          @click="tagClick(item)"
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in hotList"
          :key="index"
          >{{ item }}</van-tag
        >

        <van-cell center>
          <template #title>
            <div class="title">
              历史搜索
            </div>
          </template>
          <template #default>
            <div class="value" @click="clear">
              清空
            </div>
          </template>
        </van-cell>
        <van-tag
          @click="tagClick(item)"
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in historyList"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>
<script>
import shareItem from './shareItem'
import { articlesShare, articlesShareTopSearch } from '@/api/find' // Object...
import { setLocal, getLocal, removeLocal } from '@/utils/local'
export default {
  name: 'shareList',
  data () {
    return {
      bol: true,
      inputValue: this.$route.query.q ? this.$route.query.q : '',
      // xxx: '',
      list: [],
      loading: false,
      finished: false,
      currPage: 1, // 当前页
      pageSize: 2, // 每页多少条
      showList: true,
      hotList: [], // 大家都在搜数据
      historyList: JSON.parse(getLocal('historyList')) || [] // 历史搜索 前面为真,不往后面执行,前面不为真,直接使用后面的
    }
  },
  // watch: {
  //   '$route.query.q' (newVal) {
  //     this.inputValue = newVal
  //   }
  // },
  components: {
    shareItem
  },
  // async created () {
  //   // const res = await articlesShare()
  //   // window.console.log(res)
  //   // this.list = res.data.data.list
  // },
  methods: {
    // 搜索
    search () {
      this.list = []
      this.loading = false
      this.finished = false
      this.currPage = 1
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      this.showList = true
      // 1:不能为空  2:不能重复  3:后面添加的,要放到最前面
      if (this.inputValue.trim() !== '') {
        this.historyList.unshift(this.inputValue)
        // 去重
        this.historyList = [...new Set(this.historyList)]
        // 只要前五条
        this.historyList.splice(5)
        setLocal(JSON.stringify(this.historyList), 'historyList')
      }
      this.$router.push('/home/shareList?q=' + this.inputValue)
    },
    // 方法
    async cancelEvent () {
      this.showList = false
      if (!this.hotList.length) {
        const res = await articlesShareTopSearch()
        this.hotList = res.data.data
      }
    },
    // 上拉加载方法
    async load () {
      // 分页
      try {
        const res = await articlesShare({
          start: (this.currPage - 1) * this.pageSize,
          limit: this.pageSize,
          q: this.inputValue
        })
        this.currPage++
        // 数据要累加
        window.console.log(res.data.data.list)
        // 修改数组中的title
        if (this.inputValue.trim() !== '') {
          res.data.data.list.forEach(item => {
            item.title = item.title
              .split(this.inputValue)
              .join(`<span style="color:red">${this.inputValue}</span>`)
          })
        }
        this.list.push(...res.data.data.list)
        this.loading = false
        if (this.list.length >= res.data.data.total) {
          this.finished = true
        }
      } catch (err) {
        window.console.log(err)
      }
    },
    // tag点击事件
    tagClick (str) {
      this.inputValue = str
      this.search()
    },
    clear () {
      this.historyList = []
      removeLocal('historyList')
    }
  },
  activated () {
    const _top = this.$route.meta.scrollTop || 0
    window.scrollTo(0, _top)
    window.console.log(this.$route.meta.scrollTop)
  }
}
</script>
<style lang="less" scoped>
.shareList {
  .content {
    padding: 0 @p15;
  }
  .search {
    padding-left: 0;
    padding-right: 0;
  }
  .title {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #222222;
    line-height: 25px;
    letter-spacing: 0px;
  }
  .mb28 {
    margin-top: 32px;
    margin-bottom: 15px;
  }
  .tag {
    padding: 5px 8px;
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .van-cell {
    padding-left: 0;
    padding-right: 0;
  }
}
</style>
